import React from 'react'
import { Row, Col } from 'antd'
import './index.less';
import Util from '../../utils/utils.js'
import { logoutAction } from '../../redux/action'
import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router-dom';

class Header extends React.Component {

  state = {
    isLogin: false,
    username: ''
  }

  componentWillMount() {
    this.timer = setInterval(() => {
      let sysTime = Util.formateDate(new Date().getTime())
      this.setState({
        sysTime
      })
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  render() {

    const logout = () => {
      const { dispatch } = this.props
      dispatch(logoutAction())
      this.props.history.push('/login')
    }

    const menuType = this.props.menuType
    const isLogin = localStorage.getItem('bikeCMS')
    return (
      <div className="header" style={{width: '100%'}}>
        <Row className="header-top">
          {
            menuType ?
              <Col span="6" className="logo" style={{backgroundColor: 'transparent'}}>
                <img src="/assets/logo-ant.svg" alt="" />
                <span>CP 通用管理系统</span>
              </Col> : ''
          }
          {
            isLogin ? <Col span={menuType ? 18 : 24}>
            <span>{JSON.parse(isLogin)}</span>
            <Link to="/login" onClick={logout}>退出</Link>
          </Col> : <Col span={menuType ? 18 : 24}>
            <Link to='/login'>点击登录</Link>
          </Col>
          }
          
        </Row>
        {
          menuType ? '' :
            <Row className="breadcrumb">
              <Col span="4" className="breadcrumb-title">
              { this.props.menuName }
              </Col>
              <Col span="20" className="weather">
                <span className="date">{this.state.sysTime}</span>
              </Col>
            </Row>
        }
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    menuName: state.menuName,
    userInfo: state.userInfo
  }
}

export default connect(mapStateToProps)(withRouter(Header))